<template>
	<div id="tmpl" style="margin-top: 50px;">
		<ul class="mui-table-view">
			<li v-for="lists in list" class="mui-table-view-cell mui-media">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left" :src="lists.images.large">
					<div class="mui-media-body">
						<h5>{{lists.title}}</h5>
						<p class='mui-ellipsis'>
							<span>{{lists.genres}}</span>
						</p>
						<p class='mui-ellipsis'>
							演员：<span v-for="cast in lists.casts">{{cast.name}}、</span>
						</p>
					</div>
				</a>
			</li>
		</ul>
	</div>
</template>
<script>
export default{
	data(){
	   return{
	   "list": []
	   } 
	},
	created(){
        this.getnewlist();
	},
	methods:{
   		getnewlist(){
   			var url='https://api.douban.com/v2/movie/top250?count=15&start=0';
   			this.$http.jsonp(url).then(function(response){
   				var data=response.body;
   				console.log(data);
   				this.list=data.subjects;
   			},function(error){
   				console.log(error.body)
   			});
   		}
	}
}
	
</script>
<style scoped>
	.mui-media-body h5{
		color: #333;
		font-weight: bold;
	}
	.mui-table-view .mui-media-object{
		max-width: 80px;
	}
</style>